<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单案例-学员信息管理</title>
  <!-- 引入 引入开发版本的 -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="./node_modules/vue/dist/vue.js"></script>
  <style>
    /* 防止闪屏 */
    [v-cloak] {
      display: none;
    }

    #app {
      margin: 100px auto;
    }

    .container {
      margin: 5px auto;
    }

    .table {
      text-align: center;
      vertical-align: middle;
    }

    .tr1 {
      width: 1155px;
      height: 55px;
      background-color: rgb(238, 238, 238);
    }

    .form-group {
      margin: 10px 0;
    }

    .btn1 {
      margin-bottom: 10px;
    }

    .mask {
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, .3);
      position: absolute;
      top: 0;
      left: 0;
    }

    .mask .con {
      width: 200px;
      height: 100px;
      background-color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div id="app" class="container" v-cloak>
    <div class="h3 text-center">图书信息管理</div>
    <form>
      <div class="form-group">
        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入图书名称" v-model="bookName"
          @keydown.enter="add()">
      </div>
    </form>
    <hr>
    <table class="table table-bordered">
      <tr class="tr1">
        <td>id</td>
        <td>书名</td>
        <td>添加时间</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item,index) in arr" :key="item.id">
        <td>{{index+1}}</td>
        <td>{{item.bookName}}</td>
        <td>{{item.time}}</td>
        <td><button class="btn btn-danger" @click="del(index)">删除</button></td>
      </tr>
      <tr v-if="arr.length==0">
        <td colspan="4">暂无数据~</td>
      </tr>
      <tr v-else>
        <td colspan="4"><button class="btn btn-danger" @click="delAll">全部删除</button></td>
      </tr>
    </table>
    <div v-show="isShow" class="mask" @click.self="isShow=false">
      <div class="con">
        <button @click="isShow=false">确定</button>
        <button @click="isShow=false">取消</button>
      </div>
    </div>
  </div>

  <!-- 逻辑操作 -->
  <script>
    new Vue({
      // 挂载点
      el: '#app',
      // 存放数据、变量
      data: {
        arr: localStorage.getItem("arr") ? JSON.parse(localStorage.getItem("arr")) : [],
        bookName: ""
      },
      // 存放方法
      methods: {
        // 添加
        add() {
          if (this.bookName == '') {
            alert("图书名称不能为空");
            return;
          }
          this.arr.push({
            bookName: this.bookName,
            time: new Date().toLocaleString('chinese', { hour12: false })
          });
          // 存储到本地
          localStorage.setItem("arr", JSON.stringify(this.arr))
          this.reset();
        },
        // 清空
        reset() {
          this.bookName = "";
        },
        // 删除
        del(index) {
          let flag = confirm('确定要删除吗');
          if (flag) {
            this.arr.splice(index, 1);
            // 存储到本地
            localStorage.setItem("arr", JSON.stringify(this.arr));
          }
        },
        // 全部删除
        delAll() {
          let flag = confirm('确定要删除吗');
          if (flag) {
            this.arr = [];
            // 存储到本地
            localStorage.setItem("arr", JSON.stringify(this.arr));
          }

        },
      }
    })
  </script>
</body>

</html>